<template>
    <div>
        <!-- 资产页账户信息 -->
        <div class="info" v-if="$route.name === 'property'">
            <div class="account">
                <div class="iconBg">
                    <span class="iconfont icon-huaban22 icon"></span>
                </div>
                <div>{{ $store.state.app.accountInfo ? $store.state.app.accountInfo.account_name : '' }}</div>
            </div>

            <div class="totol property-tool">
                <span
                    :class="{'totolCount': totalEosValuation !== '-.----'}"
                >{{ totalEosValuation }}</span>
                <span class="eos">
                    EOS
                    <a class="shuaxin act" v-if="refresh">
                        <div class="iconfont icon-huaban44 refresh"></div>
                    </a>
                </span>
                <div class="totolTitle">{{ $t('public.allTotal') }}</div>
                <!-- 切换按钮 -->
                <span
                    class="change fr"
                    @click="handleShowChange"
                    v-if="$store.state.app.channel === 'tokenpocket'"
                >{{ $t('property.shortChange') }}</span>
            </div>
        </div>

        <!-- 首页账户信息 -->
        <div class="info-index" v-if="$route.name === 'index'">
            <div class="account">
                <div class="iconBg">
                    <!-- <span class="iconfont icon-huaban22 icon"></span> -->
                </div>
                <div class="totol">
					<p class="totolTitle">TMqz7jgzfC3h9YbWe9LL2TLpVhKfv3QJj4</p>
					<p class="totolCount">总估值 516151 TRON</p>
				</div>
                <i class="more-index"></i>
            </div>

            <!-- <div class="totol"> -->
                <!-- <span class="totolTitle">{{ $t('public.allTotal') }}</span> -->
                <!-- <span :class="{'totolCount': totalEosValuation !== '-.----'}">{{ totalEosValuation }}</span>
                <span class="eos">EOS-->
                <!-- <a class="shuaxin act" v-if="refresh">
				<div class="iconfont icon-huaban44 refresh refresh-index color-333"></div>
                </a>-->
                <!-- </span> -->
                <!-- <span class="change fr color-this" @click="handleShowChange"
                v-if="$store.state.app.channel === 'tokenpocket'">{{ $t('property.shortChange') }}</span>-->
            <!-- </div> -->
        </div>

        <!-- dialog account change -->
        <!-- <mt-popup class="accountChange" v-model="accountChange" popup-transition="popup-fade">
            <div class="changeList">
                <div class="title">{{ $t('property.change') }}</div>
                <div>
                    <div
                        class="item"
                        v-for="(item, $index) in walletList"
                        :key="$index"
                        @click="handleChangeAccount(item)"
                    >{{ item.name }}</div>
                </div>
                <button class="btn" @click="handleCencel">{{ $t('public.cancel') }}</button>
            </div>
        </mt-popup> -->
    </div>
</template>

<script>
import DApp from "@/utils/moreWallet";
import { Toast } from "mint-ui";
import { toFixed } from "@/utils/public";

export default {
    data() {
        return {
            accountChange: false,
            coinList: [],
            // coinDetail 资产详情
            coinDetail: {
                account: "",
                list: []
            },

            totalEosValuation: "-.----", // 总估值
            refresh: true,

            // 账户列表
            walletList: []
        };
    },
    props: [],
    components: {},
    watch: {
        "$store.state.app.accountInfo": function listen() {
            // Toast(`获取到account：${this.$store.state.app.accountInfo.account_name}`);
            this.handleGetCoinBanlance();
        }
    },
    created() {
        this.handleGetCoinBanlance();
    },
    mounted() {},
    methods: {
        // 切换账户
        handleChangeAccount(item) {
            const data = {
                account_name: item.name,
                address: item.address
            };
            // 判断是否切换账号
            if (
                this.$store.state.app.accountInfo &&
                this.$store.state.app.accountInfo.account_name !==
                    data.account_name
            ) {
                localStorage.removeItem("token");
            }
            this.$store.dispatch("setAccountInfo", data);
            this.accountChange = false;
        },
        handleShowChange() {
            this.accountChange = true;
            DApp.getWalletList((err, data) => {
                // this.accountChange = true;
                if (err) {
                    return;
                }
                this.walletList = data;
                // alert(JSON.stringify(data))
            });
        },
        handleCencel() {
            this.accountChange = false;
        },
        // 获取TRX余额及其它币种余额
        handleGetCoinBanlance() {
            console.log("Account.vue", "获取TRX余额及其它币种余额");
            try {
                const params = {
                    code: "eosio.token",
                    coin: "EOS"
                };
                DApp.getCurrencyBalance(params, (err, res) => {
                    this.refresh = false;
                    // if (res.code !== 0) {
                    //   Toast({
                    //     message: res.msg,
                    //     position: 'center',
                    //     duration: 2000,
                    //   });
                    //   return;
                    // }
                    if (err) {
                        setTimeout(() => {
                            // this.handleGetCoinBanlance();
                        }, 1000);
                        return;
                    }
                    this.totalEosValuation = toFixed(res, 4);
                    // this.coinList = res.accountCoinList;
                    // this.$store.dispatch('setCoinList', this.coinList);
                });
            } catch (error) {
                setTimeout(() => {
                    // this.handleGetCoinBanlance();
                }, 1000);
            }
        }
    },
    beforeDestroy() {}
};
</script>

<style scoped lang="scss">
@import "../assets/css/public.scss";

@-webkit-keyframes rotating {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

@keyframes rotating {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

.shuaxin {
    color: #999;
    margin: 0;
    font-size: 0.32rem;
    z-index: 200;
    margin-left: 0.2rem;

    .refresh {
        display: inline-block;
        font-size: 0.25rem;
        color: white;
        animation: rotating 0.8s linear infinite;
    }
}

.info-index {
    background: #fff;
    // height: 1.7rem;
    font-size: 0.32rem;
    // padding: 0.3rem 0;
    box-sizing: border-box;

    .account {
        display: flex;
        align-items: center; /*垂直居中*/
        // justify-content: center;/*水平居中*/

        .iconBg {
            background-image: url("~@/assets/img/index/logo.png");
            background-size: 100%;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 50%;
            width: 0.64rem;
            height: 0.64rem;
            display: flex;
            align-items: center; /*垂直居中*/
            justify-content: center; /*水平居中*/
            margin-right: 0.15rem;

            .icon {
                font-size: 0.32rem;
                color: $color-this;
            }
        }
    }

    .totol {
        font-size: 0.42rem;
       
        .totolTitle {
            font-size: 0.32rem;
            color: #969696;
            transform: scale(0.5);
            -webkit-transform-origin: 0 125%;
            transform-origin: 0 125%;
        }

        .totolCount {
            font-weight: 400;
            font-size: 0.48rem;
            color: #313131;
            transform: scale(0.5);
            -webkit-transform-origin: 0 25%;
            transform-origin: 0 25%;
        }

        // .change {
        //     font-size: 0.25rem;
        // }
    }
    .more-index{
        height: 0.32rem;
        width: 0.08rem;
        background-image: url("~@/assets/img/index/more-index.png");
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
    }
}

.info {
    background: linear-gradient(
        to right,
        rgba(68, 92, 241, 0.96),
        rgba(57, 82, 193, 1)
    );
    height: 3.1rem;
    max-width: 100%;
    // text-align: center;
    color: white;
    position: relative;
    box-shadow: 0px 0px 0.15rem $color-333;
    font-size: 0.32rem;
    padding: 0.7rem 0.36rem 0.8rem 0.36rem;
    box-sizing: border-box;

    .account {
        display: flex;
        align-items: center; /*垂直居中*/
        // justify-content: center;/*水平居中*/

        .iconBg {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            width: 0.55rem;
            height: 0.55rem;
            display: flex;
            align-items: center; /*垂直居中*/
            justify-content: center; /*水平居中*/
            margin-right: 0.15rem;

            .icon {
                font-size: 0.32rem;
            }
        }
    }

    .totolTitle {
        font-size: 0.25rem;
    }

    .totol {
        font-size: 0.42rem;
        height: 0.5rem;
        margin-top: 0.2rem;
        line-height: 0.5rem;

        &.property-tool {
            padding-left: 0.7rem;
        }

        .totolCount {
            font-weight: bold;
        }

        .eos {
            font-size: 0.32rem;
        }

        .change {
            font-size: 0.25rem;
        }
    }
}

.accountChange {
    border-radius: 0.15rem;

    .changeList {
        text-align: center;
        font-size: 0.42rem;
        width: 5.47rem;
        padding: 0.5rem 0.36rem;
        box-sizing: border-box;

        .title {
            height: 0.5rem;
            line-height: 0.5rem;
            font-size: 0.32rem;
            color: $color-this;
            margin-bottom: 0.2rem;
        }

        .item {
            height: 1.07rem;
            line-height: 1.07rem;
            border-bottom: 1px solid $color-e3e3e3;

            &:last-child {
                border-bottom: 1px solid transparent;
            }
        }

        .btn {
            font-size: 0.25rem;
            height: 0.68rem;
            line-height: 0.68rem;
            margin-top: 0.2rem;
            width: 2.34rem;
            color: white;
            background: $color-blue;
            border-radius: 0.12rem;
        }
    }
}
</style>
